<!--公共试题样式页面，做题交互逻辑不在该组件里-->
<!--传入试题与内容，笔记收藏-->
<!--查看解析页面 则解析默认展示-->
<script setup>
import PractiseTopicApis from '@/apis/practiseTopic.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import listApis from '@/apis/list';
import questionApis from '@/apis/question';
import useLocalStore from '@/stores/local';
import {computed} from 'vue';
import {getCurrentInstance} from 'vue'

import {encrypt} from '@/utils/jsencrypt.js'
import {onBeforeRouteLeave, useRoute} from 'vue-router';

const route = useRoute()
const myCountDown=ref(null);
const props = defineProps({
  examTime:{
    type:Number,
    default: 0
  },
  paperMode:{
    type: String,
    default:'practice'
  },
  loading: {
    type: Boolean,
    required: true
  },
  showLeft: {
    type: Boolean,
    required: true
  },
  toggle: {
    type: Function,
    required: true
  },
  questionData: {
    type: Object,
    required: true,
    // default() {
    //   return {
    //     name: '',
    //   }
    // }
  },
  qCount: {
    type: Number,
    required: true
  },
  // flatQuestionData: {
  //   type: Array,
  //   required: true,
  // },
  changeCurrent: {
    type: Function,
    required: true
  },
  currentQuestion: {
    type: Object,
    required: true,
  },
  currentOptionsStatus: {
    type: Object,
    required: true,
  },
  changeRadio: {
    type: Function,
    required: true
  },
  changeCheckbox: {
    type: Function,
    required: true
  },
  submitThis: {
    type: Function,
    required: true
  }, saveAndExit: {
    type: Function,
    required: true
  },
  toggleNote: {
    type: Function,
    required: true
  },
  preQuestion: {
    type: Function,
    required: true
  },
  nextQuestion: {
    type: Function,
    required: true
  },
  doNote: {
    type: Function,
    required: true
  },
  saveNote: {
    type: Function,
    required: true
  },
  showAnalyse:{
    type:Boolean,
    default: true
  },
  fillInput:{
    type: Function,
    default:()=>{

    }
  },
  textareaChange:{
    type: Function,
    default:()=>{

    }
  },
  save:{
    type: Function,
    default:()=>{

    }
  },
  disabled:{
    type: Boolean,
    default: false
  }
//   firstTypeMap
})

const canSubmit=ref(true)
const firstType = {}
const collapse = ref(['name'])
const draw = ref(false)
const formData = ref({
  content: '',
  open: 0
})
const rules = ref({
  content:{
    required: true,
    message: '请输入笔记内容',
    trigger: 'blur'
  },
  open:{
    required: true,
    message: '请选择公开范围',
    trigger: 'change'
  }
})
const noteAction= ref('save')
const myElForm=ref(null)
function closeDrawer(){
  myElForm.value.resetFields(['content','open'])
}
function currentAnalyseText(myCard) {
  switch (myCard.firstType) {
    case 1:
    case 5:
      return myCard.rightAnswer
    case 3:
      return myCard.rightAnswer == 0 ? '错' : '对'
    case 4:
      return myCard.rightAnswer.split(' ').map((e, i) => {
        return `${i + 1}.${e}`
      }).join('<br/>');

    case 2:
    case 7:
      return myCard.rightAnswer.join(' ')
    default:
  }
}
// 剩余毫秒数
function getCountDownNumber(){
  if(myCountDown.value){
    let str=myCountDown.value.displayValue
    const numArray=str.split(':').map(e=>Number(e))
    return (numArray[0] * 60 * 60 + numArray[1] * 60 + numArray[2]) * 1000
  }else{
    return 0
  }
}
function setDraw(value) {
  draw.value = value
}
function setFormData(val){
  formData.value = val
};
function currentMyAnswerText(myCard) {
  // 1: 'singleChoice',
  // 2: 'multipleChoice',
  // 3: 'judgment',
  // 4: 'fill',
  // 5: 'text',
  // 6: 'combination',
  // 7: 'indefiniteMultipleChoice',

  switch (myCard.firstType) {
    case 1:
      return myCard.answer
    case 3:
      return myCard.answer == 0 ? '错' : '对'
    case 4:
      let arr = []
      for (let i = 0; i < myCard.length; i++) {
        arr.push(`${i + 1}.${myCard['answer' + i]}`)
      }
      return arr.join('<br/>');
    case 5:
      return ''
    case 2:
    case 7:
      return myCard.answer.join(' ')
    default:

  }
}
function finish(){
  ElMessage({
    message: '考试时间结束',
    type: 'success'
  })
  canSubmit.value=false
}

defineExpose({
  setDraw,
  setFormData,
  noteAction
})
</script>

<template>
  <div class="CommonQuestionContainer">

    <div class="pageBox h100h medium" v-loading="loading">

      <div class="topicBox h100h" :class="showLeft ? 'show' : 'hide'">

        <div class="topiccontent h100h">
          <div class="topiccontentL">
            <div class="toggle-icon" @click="toggle">
              <img src="@/assets/images/to_right.svg" class="rightIcon">
            </div>

            <div class="content" v-if="showLeft">
              <div class="chapterName"><i class="iconQuestionBank"></i>{{ route.query.name}}
              </div>
              <div class="topicL_ListBox">
                <div class="topicL_List">
                  <div class="topicL_ListWap" v-if="questionData">
                    <template v-for="(item, index) in questionData.content" :key="index">
                      <el-collapse class="" v-model="collapse">
                        <el-collapse-item disabled name="name"
                                          :title="item.tyName">
                          <div class="left-grid">

                            <div @click="changeCurrent(index,index1)" class="cardList"
                                 :class="{ biaoji: item1.collect, active: item1.current, yida: item1.answerStatus == 'done' || item1.answer.length > 0 }"
                                 v-for="(item1, index1) in item.qs" :key="index1">
                              {{ item1.num }}
                            </div>
                          </div>
                        </el-collapse-item>
                      </el-collapse>
                    </template>
                  </div>
                </div>
                <div class="topicL_ListBottom">
                  <div class="list">
                    <div class="cardList active"></div>
                    <div>当前</div>
                  </div>
                  <div class="list">
                    <div class="cardList yida"></div>
                    <div>已答</div>
                  </div>
                  <div class="list">
                    <div class="cardList omission"></div>
                    <div>未答</div>
                  </div>
                  <div class="list">
                    <div class="cardList biaoji"></div>
                    <div>标记</div>
                  </div>
                </div>

                <div class="topicBottomL" v-if="canSubmit&&!disabled">

                  <el-button class="saveBtn" type="primary" v-if="paperMode!='practice'&&paperMode!='random'" @click="save(getCountDownNumber())">保存</el-button>
                  <el-button class="saveBtn" @click="saveAndExit" type="primary">{{ paperMode=='practice'?'提交':'交卷' }}</el-button>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="topiccontentR h100h">
        <div class="tiListBox h100h">
          <div class="firstType">
          </div>
          <div class="questionList h100h">
            <div class="questionContent h100h flex" v-if="currentQuestion">
              <div class="questionBox h100s">
                <div style="display: flex;justify-content: center">
                  <el-countdown @finish="finish" ref="myCountDown" :value="examTime" v-if="paperMode=='exam'"></el-countdown>
                </div>

                <div>
                  <div class="questionTitle"><span class="questionNum">{{
                      currentQuestion.num
                    }}</span>
                    <span v-html="currentQuestion.stem[0]['vl']"></span>
                  </div>
                  <div class="questionOptionMap" >
                    <template v-if="currentQuestion['firstType'] == 1">
                      <el-radio-group class="my-radio-group"
                                      v-model="currentQuestion.answer"
                                      :disabled="disabled"
                                      @change="changeRadio">
                        <el-radio v-for="(item, index) in currentQuestion['quOption']"
                                  :key="index" :label="item.option" class="my-checkbox"
                                  :class="{ right:'practice'==paperMode&& currentQuestion.answerStatus == 'done' && currentOptionsStatus.right == item.option, wrong:'practice'==paperMode&& currentQuestion.answerStatus == 'done' && currentOptionsStatus.wrong == item.option }">
                          <div class="my-option">
                            <span class="icon">{{ item.option }}</span>
                            <span style="margin-left:20px"
                                  v-html="item.content[0]['vl']">
                            </span>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </template>
                    <template
                        v-else-if="currentQuestion['firstType'] == 2 || currentQuestion['firstType'] == 7">

                      <el-checkbox-group v-model="currentQuestion.answer"
                                         :disabled="disabled"
                                         @change="changeCheckbox">
                        <el-checkbox class="my-checkbox"
                                     v-for="(item, index) in currentQuestion['quOption']"
                                     :key="index" :label="item.option"
                                     :class="{ right:'practice'==paperMode&& currentQuestion.answerStatus == 'done' && (currentOptionsStatus.right.includes(item.option) || currentOptionsStatus.noSelected.includes(item.option)), wrong: 'practice'==paperMode&&currentQuestion.answerStatus == 'done' && currentOptionsStatus.wrong.includes(item.option) }">
                          <div class="my-option">
                                                                      <span class="icon"
                                                                            :class="{ 'noSelected':'practice'==paperMode&& currentQuestion.answerStatus == 'done' && currentOptionsStatus.noSelected.includes(item.option) }">{{
                                                                          item.option
                                                                        }}</span>
                            <span style="margin-left:20px"
                                  v-html="item.content[0]['vl']">
                            </span>
                          </div>
                        </el-checkbox>
                      </el-checkbox-group>
                    </template>
                    <template v-else-if="currentQuestion['firstType'] == 3">
                      <el-radio-group class="my-radio-group"
                                      v-model="currentQuestion.answer"
                                      :disabled="disabled"
                                      @change="changeRadio">
                        <el-radio v-for="(item, index) in currentQuestion['quOption']"
                                  :key="index" :label="item.option" class="my-checkbox"
                                  :class="{ right:'practice'==paperMode&& currentQuestion.answerStatus == 'done' && currentOptionsStatus.right == item.option, wrong:'practice'==paperMode&& currentQuestion.answerStatus == 'done' && currentOptionsStatus.wrong == item.option }">
                          <div class="my-option">
                            <span class="icon">{{ item.option }}</span>
                            <span style="margin-left:20px">
                                                                          {{ item.option == 0 ? '错' : '对' }}
                                                                      </span>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </template>
                    <template v-else-if="currentQuestion['firstType'] == 4">
                      <el-input v-for="(item, index) in currentQuestion['quOption']"
                                :disabled="disabled"
                                v-model="currentQuestion['answer' + index]" @input="(val)=>fillInput(val,index)">
                      </el-input>
                    </template>
                    <template v-else-if="currentQuestion['firstType'] == 5">
                      <el-input class="textareaInput" type="textarea"
                                :disabled="disabled"
                                v-model="currentQuestion.answer"
                                placeholder="请输入答案" @input="textareaChange"></el-input>
                    </template>
                  </div>

                  <div class="topicBottomWrap">
                    <div class="topicBottom">
                      <el-button type="primary" round v-if="route.path!='/questionBank/paper/QuestionAnalys'&&paperMode=='practice'&&currentQuestion.answerStatus != 'done'&&showAnalyse" @click="submitThis">
                        确定
                      </el-button>
                      <div class="right-btns">
                        <el-button type="primary" @click="doNote">笔记</el-button>
                        <el-button type="primary" v-if="currentQuestion && currentQuestion.collect" @click="toggleNote">
                          取消收藏
                        </el-button>
                        <el-button type="primary" v-else-if="currentQuestion" @click="toggleNote">收藏本题</el-button>
                        <el-button type="primary" v-if="currentQuestion.num > 1" @click="preQuestion">上一题</el-button>
                        <el-button type="primary" v-if="currentQuestion.num < qCount " @click="nextQuestion">下一题
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jiexiqu h100h"
           v-if="(paperMode=='practice'&&currentQuestion&&currentQuestion.answerStatus == 'done')||(currentQuestion&&route.path=='/questionBank/paper/QuestionAnalys')">
        <div class="jiexiBox h100s">
          <template v-if="currentQuestion.firstType != 5">
            <div class="common_title">
              <div class="common_border"></div>
              <div class="common_title">我的答案</div>
            </div>
            <div class="commontext"><span class="rescolor"
                                          v-html="currentMyAnswerText(currentQuestion)">
                                                          </span></div>
            <div class="common_title">
              <div class="common_border"></div>
              <div class="common_title">参考答案</div>
            </div>
            <div class="commontext mycolor"
                 v-html="currentAnalyseText(currentQuestion)">
            </div>
          </template>


          <div class="common_title">
            <div class="common_border"></div>
            <div class="common_title">解析</div>
          </div>
          <div class="commontext" v-html="currentQuestion.answerDesc[0].vl">
          </div>
        </div>
      </div>
    </div>
    <el-drawer @close="closeDrawer" v-model="draw" direction="rtl" size="40%">
      <el-form :model="formData" label-width="120px" :rules="rules" ref="myElForm">
        <el-form-item label="是否公开" prop="open">
          <el-radio-group v-model="formData.open">
            <el-radio :value="true" size="large">公开</el-radio>
            <el-radio :value="false" size="small">不公开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="formData.content" placeholder="请输入笔记内容">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="saveNote(formData)">保存</el-button>
    </el-drawer>
  </div>
</template>

<style scoped>
.CommonQuestionContainer {

}

.pageBox.h100h.medium {
  display: flex;
  gap: 26px;
}

.topicBox.h100h {
  background: white;
  box-sizing: border-box;
  padding-left: 16px;
}

.chapterName {
  padding: 20px 0;
  display: flex;
  align-items: center;
  color: var(--gray_20);
  font-weight: 700;
  font-size: 24px;
}

.topicBox.h100h.show {
  width: 400px;
}

.topicBox.h100h.hide {
  width: 0px;
}

.topiccontentL {
  position: relative;
  min-height: 300px;
}

.toggle-icon {
  width: 26px;
  height: 80px;
  font-size: 16px;
  position: absolute;
  right: -26px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rightIcon {
  width: 24px;
  height: 24px;
}

.hide .rightIcon {
  transform: rotate(180deg);
}

.left-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(8, 30px);
  grid-auto-rows: 30px;
}

.left-grid .cardList {
  cursor: pointer;
}

.cardList {
  color: black;
  background: #F6F6F6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.cardList.yida {
  color: #409eff;
  background: rgb(235.9, 245.3, 255);
}

.cardList.active {
  background: #3C6CFF;
  color: white;
}


.cardList.biaoji {
  position: relative;
}

.cardList.biaoji:before {
  content: " ";
  display: block;
  width: 12px;
  height: 12px;
  background: url() no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.topicL_ListBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
}

.topicL_ListBottom .list {

  display: flex;
  gap: 10px;
}

.topiccontentR.h100h {
  flex: 1;
  padding: 16px;
  background: white;
}

.questionTitle .questionNum {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background: #3C6CFF;
  text-align: center;
  line-height: 30px;
}

.my-radio-group ::v-deep(.el-radio__input) {
  display: none;
}

::v-deep(.el-checkbox__inner) {
  display: none;
}

::v-deep(.el-radio__label), ::v-deep(.el-checkbox__label) {
  padding-left: 0;
}

.questionBox.h100s {
  background-attachment: fixed;
  background-image: url('@/assets/images/logo31.png');
  background-repeat: repeat;
  background-size: 150px 150px;
}


.my-checkbox {
  height: 50px;
  font-size: 16px;
  display: block;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--gray_95);
}

.my-checkbox.right {
  border: 1px solid var(--green_n);
  background-color: var(--green_a);
  color: var(--green_n);
}

.my-checkbox.wrong {
  border: 1px solid var(--red_n);
  background-color: var(--red_a);
  color: var(--red_n);
}

.my-radio-group {
  display: block !important;
  width: 100%;

}


.my-checkbox:hover {
  background: rgb(247, 248, 250);
}


.notSelect-checkbox {
  border: 1px solid var(--green_n);
  color: var(--green_n);
}

.defalut-checkbox {
  border: 1px solid rgba(0, 0, 0, .1);
  color: black;
}


.my-option {
  height: 26px;
  display: flex;
  align-items: center;
}

.my-option .icon {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .1);
  width: 26px;
  height: 26px;
  text-align: center;
  display: inline-table;
  vertical-align: middle;
}

.right .my-option .icon {
  border: 1px solid var(--green_n);
  background: url() no-repeat 50%;
  background-size: 26px;
  background-color: var(--green_n);
  font-size: 0;
}

.wrong .my-option .icon {
  border: 1px solid var(--red_n);
  background: url() no-repeat 50%;
  background-size: 26px;
  background-color: var(--red_n);
  font-size: 0;
}

.right .my-option .icon.noSelected {
  background: none;
  border: 1px solid var(--green_n);
  color: var(--green_n);
  font-size: 14px;
}

::v-deep(.el-button--primary) {
  --el-color-primary: #3C6CFF;
}

::v-deep(.el-radio:last-child), ::v-deep(.el-checkbox:last-of-type) {
  margin-right: 30px;
}

.jiexiqu.h100h {
  width: 400px;
  box-sizing: border-box;
  padding: 12px;
  background: white;
}

.common_title {
  display: flex;
  gap: 10px;
  align-items: center;

  font-size: 20px;
  font-weight: 600;
  color: var(--gray_20);
}

.common_title .common_border {
  width: 6px;
  height: 16px;
  background: linear-gradient(to bottom, rgb(235.9, 245.3, 255), #3C6CFF);
}

.commontext {
  padding-left: 30px;
  font-size: 18px;
  color: var(--gray_20);
}

.commontext.mycolor {
  color: var(--green_n);
}

.wrong .my-option {
  color: red;
}

.topicBottomWrap .topicBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topicBottomWrap .topicBottom .right-btns {
  display: flex;
  gap: 16px;
  align-items: center;
}

.topicBottomL {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

.topicBottomWrap {
  margin-top: 80px;
}
.CommonQuestionContainer .questionBox ::v-deep(.el-statistic__number){
  color: red;
}
</style>